<ng-template #inputTemplate>
  <input #inputElement
    autocomplete="something-new"
    class="apes-select-search__field"
    (compositionstart)="isComposing = true"
    (compositionend)="isComposing = false"
    (input)="updateWidth()"
    [ngModel]="inputValue"
    (ngModelChange)="setInputValue($event)"
    [disabled]="apesSelectService.disabled">
</ng-template>
<div class="apes-select-selection__rendered">
  <div *ngIf="apesPlaceHolder"
    apes-select-unselectable
    [style.display]="placeHolderDisplay"
    class="apes-select-selection__placeholder">{{ apesPlaceHolder }}</div>
  <!--single mode-->
  <ng-container *ngIf="apesSelectService.isSingleMode">
    <!--selected label-->
    <div *ngIf="apesSelectService.listOfCachedSelectedOption.length && apesSelectService.listOfSelectedValue.length"
      class="apes-select-selection-selected-value"
      [attr.title]="apesSelectService.listOfCachedSelectedOption[0]?.apesLabel"
      [ngStyle]="selectedValueStyle">
      <ng-container *apesStringTemplateOutlet="apesCustomTemplate; context: { $implicit: apesSelectService.listOfCachedSelectedOption[0] }">
        <div class="apes-select-selection__choice__content">{{ apesSelectService.listOfCachedSelectedOption[0]?.apesLabel }}</div>
      </ng-container>
    </div>
    <!--show search-->
    <div *ngIf="apesShowSearch"
      class="apes-select-search apes-select-search--inline" [style.display]="apesOpen ? 'block' : 'none'">
      <div class="apes-select-search__field__wrap">
        <ng-template [ngTemplateOutlet]="inputTemplate"></ng-template>
        <span class="apes-select-search__field__mirror">{{inputValue}}&nbsp;</span>
      </div>
    </div>
  </ng-container>
  <!--multiple or tags mode-->
  <ul *ngIf="apesSelectService.isMultipleOrTags">
    <ng-container *ngFor="let option of apesSelectService.listOfCachedSelectedOption | slice: 0 : apesMaxTagCount;trackBy:trackValue; let index = index">
      <li [@zoomMotion]
        [apesNoAnimation]="noAnimation?.apesNoAnimation"
        [attr.title]="option.apesLabel"
        [class.apes-select-selection__choice__disabled]="option.apesDisabled"
        class="apes-select-selection__choice">
        <ng-container *apesStringTemplateOutlet="apesCustomTemplate; context:{ $implicit: apesSelectService.listOfCachedSelectedOption[index] }">
          <div class="apes-select-selection__choice__content">{{ option.apesLabel }}</div>
        </ng-container>
        <span *ngIf="!option.apesDisabled"
          class="apes-select-selection__choice__remove"
          (mousedown)="$event.preventDefault()"
          (click)="removeSelectedValue(option, $event)">
          <i apes-icon apesType="close" class="apes-select-remove-icon" *ngIf="!apesRemoveIcon; else apesRemoveIcon"></i>
        </span>
      </li>
    </ng-container>
    <li *ngIf="apesSelectService.listOfCachedSelectedOption.length > apesMaxTagCount"
      [@zoomMotion]
      [apesNoAnimation]="noAnimation?.apesNoAnimation"
      class="apes-select-selection__choice">
      <div class="apes-select-selection__choice__content">
        <ng-container *ngIf="apesMaxTagPlaceholder">
          <ng-template
            [ngTemplateOutlet]="apesMaxTagPlaceholder"
            [ngTemplateOutletContext]="{ $implicit: apesSelectService.listOfSelectedValue | slice: apesMaxTagCount}">
          </ng-template>
        </ng-container>
        <ng-container *ngIf="!apesMaxTagPlaceholder">
          + {{ apesSelectService.listOfCachedSelectedOption.length - apesMaxTagCount }} ...
        </ng-container>
      </div>
    </li>
    <li class="apes-select-search apes-select-search--inline">
      <ng-template [ngTemplateOutlet]="inputTemplate"></ng-template>
    </li>
  </ul>
</div>
<span *ngIf="apesAllowClear && apesSelectService.listOfSelectedValue.length"
  class="apes-select-selection__clear"
  apes-select-unselectable
  (mousedown)="$event.preventDefault()"
  (click)="onClearSelection($event)">
    <i apes-icon apesType="close-circle" apesTheme="fill" *ngIf="!apesClearIcon; else apesClearIcon" class="apes-select-close-icon"></i>
  </span>
<span class="apes-select-arrow" apes-select-unselectable *ngIf="apesShowArrow">
  <i apes-icon apesType="loading" *ngIf="apesLoading; else defaultArrow"></i>
  <ng-template #defaultArrow>
    <i apes-icon apesType="down" class="apes-select-arrow-icon" *ngIf="!apesSuffixIcon; else apesSuffixIcon"></i>
  </ng-template>
</span>
